<template>
  <div class="setting-r-content">
    <div class="search-content">
      <!-- 搜索条 -->
      <Col class="panel search-panel" span="24">
      <Form :label-width="70" inline :model="formHeader">
        <Col :span="24">
        <FormItem label="选择城市:">
          <Select clearable v-model="formHeader.cityId" style="width: 200px;" @on-change="cityChange">
            <Option :value="item.id" v-for="(item,index) in citylist" :key="index" :label="item.name"></Option>
          </Select>
        </FormItem>
        <FormItem label="企业名称:" v-if="userRole != 'ROLE_DEMO'">
          <Select clearable v-model="formHeader.companyId" style="width: 200px;" @on-change="formHeader.dn = ''">
            <Option :value="item.id" v-for="(item,index) in companyList" :key="index" :label="item.name" />
          </Select>
        </FormItem>
        <FormItem label="企业名称:" v-if="userRole == 'ROLE_DEMO'">
          <Select clearable v-model="formHeader.companyId" style="width: 200px;" @on-change="formHeader.dn = ''">
            <Option :value="item.id" v-for="(item,index) in companyList" :key="index" :label="item.alias" />
          </Select>
        </FormItem>
        <FormItem label="设备名称:">
          <Input style="width: 190px;" v-model="formHeader.dn" placeholder="设备名称..." clearable />
        </FormItem>
        </Col>
        <Col :span="24">
        <FormItem label="设备状态:">
          <RadioGroup v-model="formHeader.status" type="button">
            <Radio label="">全部</Radio>
            <Radio label="1">正常</Radio>
            <Radio label="2">告警</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="是否在线:">
          <RadioGroup type="button" v-model="formHeader.online">
            <Radio :label="null">全部</Radio>
            <Radio label="1">在线</Radio>
            <Radio label="0">离线</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem class="margin-left-20">
          <Button type="primary" @click.stop="_requireThing" style="margin-right:20px;">查询</Button>
          <Button type="primary" @click.stop="_addNew" :disabled="userRole=='ROLE_DEMO'">新增设备</Button>
        </FormItem>
        </Col>
      </Form>
      </Col>
    </div>
    <div class="w1 setting-scroll__content" style="height: calc(100% - 109px);">
      <Row class="setting-content__row">
        <Col class="panel table-panel" :span="24">
        <Table :columns="userRole==='ROLE_DEMO'?columnsOfDemo: columns" :data="tableData" border :loading="pageInfo.loading"></Table>
        </Col>
        <!-- 分页 -->
        <Col class="panel page-panel cf" :span="24" style="margin-bottom: 10px;">
        <Page :total="pageInfo.total" :current.sync="pageInfo.page" class="fr" @on-change="switchThePaging" :page-size="20" />
        </Col>
        <Col :span="24" class="page-bottom">
        </Col>
      </Row>
      <!-- 播放视频 -->
      <Modal v-model="videoDialog" fullscreen title="Fullscreen Modal" :closable="false">
        <videoPlayer />
      </Modal>
      <!-- 新建视频设备 -->
      <Modal class-name="custom-modal-padding-10" v-model="addDialog" title="新建设备" fullscreen :closable="false">
        <addVideoDeviceDialogForm @addBtn="_addBtn" @save="addNewSave" ref="addFormDialog" v-if="addDialog" />
        <div slot="footer">
          <Button type="primary" @click="addFormConfirm" :loading="addBtnDisable">
            <span v-if="!addBtnDisable">确定</span>
            <span v-else>Loading...</span>
          </Button>
          <Button @click="addDialog=false;">取消</Button>
        </div>
      </Modal>
    </div>
  </div>
</template>
<script>
import { getCityListOfNew, getSearchCompany, getDisk, delDisk } from "@/api"
import { mapState } from "vuex"
import buildColumns from "./material/buildColumns"
import addVideoDeviceDialogForm from "./components/addVideoDeviceDialogForm"
import videoPlayer from "./components/videoPlayerModule"

export default {
  components: {
    addVideoDeviceDialogForm,
    videoPlayer
  },
  computed: {
    ...mapState({
      userRole: state => state.userInfo.rname
    })
  },

  async mounted() {
    await this._getCityListAll()
    this._getDisk()
  },

  data() {
    const that = this
    return {
      citylist: [],
      companyList: [],
      addBtnDisable: false,
      editBtnDisable: false,
      videoDialog: false,
      addDialog: false,
      selectRow: {},
      tableData: [],
      columns: buildColumns(that, false),
      columnsOfDemo: buildColumns(that, true),
      pageInfo: {
        total: 0,
        loading: false,
        page: 1
      },
      formHeader: {
        cityId: "",
        companyId: "",
        online: null,
        dn: "",
        status: "",
        id: ""
      }
    }
  },

  methods: {
    // 打开新建dialog
    _addNew() {
      this.addDialog = true
    },

    // 新建调用子组件方法
    addFormConfirm() {
      this.$refs.addFormDialog.submit()
    },

    // 子组件$emit 保存 / 新建
    addNewSave() {
      this._getDisk()
      this.addBtnDisable = false
      this.addDialog = false
    },

    // 调用子组件方法，校验表单是否正确
    editFormConfirm() {
      this.$refs.editDialogRef.submit()
    },

    _editBtn(bool) {
      this.editBtnDisable = bool
    },
    _addBtn(bool) {
      this.addBtnDisable = bool
    },

    _requireThing() {
      this.pageInfo.page = 1
      this._getDisk()
    },

    _getDisk() {
      let that = this,
        params = { ...that.pageInfo, ...that.formHeader }
      that.pageInfo.loading = true
      getDisk({
        params
      }).then(res => {
        if (res.code === 200) {
          that.tableData = res.data.list
          that.pageInfo.total = res.data.total
          setTimeout(() => {
            that.pageInfo.loading = false
          }, 500)
        }
      })
    },

    // 分页切换
    switchThePaging(index) {
      let that = this
      that.pageInfo.page = index
      that._getDisk()
    },

    // 表格中删除
    handleDelete(row) {
      let id = row.id
      let that = this
      delDisk(id).then(res => {
        if (res.code == 200) {
          this._getDisk()
          that.$Message.success("操作成功")
        } else {
          that.$Message.error(res.message)
        }
      })
    },

    // 获取城市列表
    async _getCityListAll() {
      let vm = this
      await getCityListOfNew({}).then(res => {
        if (res.code == 200) {
          vm.citylist = res.data
        }
      })
    },

    // 城市变更，企业列表联动
    cityChange(id) {
      let that = this
      that.companyList = []
      that.formHeader.companyId = ""
      that.formHeader.dn = ""
      if (!!id) {
        that.formHeader.cityId = id
        that._getCompanyList()
      }
    },

    // 获取企业列表
    _getCompanyList() {
      let vm = this
      let params = {
        cityId: vm.formHeader.cityId,
        thermalImage: 1,
        size: 1000000
      }
      return new Promise((resolve, reject) => {
        getSearchCompany(params).then(res => {
          if (res.code == 200) {
            vm.companyList = res.data
            resolve()
          } else {
            reject()
          }
        })
      })
    }
  }
}
</script>
